import { Tabs } from 'antd';
import React, { Component } from 'react';
import CallLimit from './CallLimit';
import SmsChannel from './SmsChannel';
import qs from 'query-string';
import './style.scss';
import { checkPermission } from 'permission/Index';

const { TabPane } = Tabs;

interface Props {}
interface State {}

/**企业设置-呼叫频次限制 */
export default class CorporateSet extends Component<Props, State> {
  state = {
    currentKey: 'callLimit',
  };
  /**配置左侧tab数据*/
  tabConfig = [
    {
      key: 'callLimit',
      title: '呼叫频次限制',
      component: <CallLimit />,
      permission: '/system/corporateSet/callLimit',
    },
    {
      key: 'smsChannel',
      title: '短信通道设置',
      component: <SmsChannel />,
      permission: '/system/corporateSet/smsChannel',
    },
  ];
  render() {
    const currentKey = qs.parse((this.props as any).location.search).type as string;
    return (
      <div className="system-set corporate-set">
        <Tabs
          tabPosition="left"
          className="set-content"
          activeKey={currentKey}
          onChange={(activeKey: string) => {
            (this.props as any).history.replace(`/webapp/system/corporateSet?type=${activeKey}`);
          }}
        >
          {this.tabConfig.map(
            item =>
              checkPermission(item.permission as any) && (
                <TabPane tab={item.title} key={item.key}>
                  {item.component}
                </TabPane>
              )
          )}
        </Tabs>
      </div>
    );
  }
}
